<script setup>
import router from "@/router";
import {Marked} from 'marked'
import {ref, onMounted, provide, h} from "vue";

defineOptions({
    inheritAttrs: false
})


let wiki_text = ref('')
let currentIndex = 0
let showBlinkCursor = ref(true)
let marked = new Marked()

const wiki = marked.parse('人工智能（Artificial Intelligence），英文缩写为AI。 它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能是新一轮科技革命和产业变革的重要驱动力量。\n\n' +
    '人工智能是智能学科重要的组成部分，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。人工智能从诞生以来，理论和技术日益成熟，应用领域也不断扩大，可以设想，未来人工智能带来的科技产品，将会是人类智慧的“容器”。人工智能可以对人的意识、思维的信息过程的模拟。人工智能不是人的智能，但能像人那样思考、也可能超过人的智能。\n\n' +
    '人工智能是一门极富挑战性的科学，从事这项工作的人必须懂得计算机知识，心理学和哲学等。人工智能是包括十分广泛的科学，它由不同的领域组成，如机器学习，计算机视觉等等。总的说来，人工智能研究的一个主要目标是使机器能够胜任一些通常需要人类智能才能完成的复杂工作。但不同的时代、不同的人对这种“复杂工作”的理解是不同的。2017年12月，人工智能入选“2017年度中国媒体十大流行语”。2021年9月25日，为促进人工智能健康发展，《新一代人工智能伦理规范》发布。')

marked.use({
    breaks: true
})

const el_header = ref()




onMounted(() => {
    let printText = () => {
        if (currentIndex < wiki.length) {
            let currentChar = wiki.charAt(currentIndex)
            wiki_text.value += currentChar
            currentIndex++
            setTimeout(printText, Math.random()*300)
        }else showBlinkCursor.value = false
    }
    if (window.screen.width > 768) printText()
})

</script>

<template>
    <div class="main-page">
        <el-container style="user-select: none;height: 100%;width: 100%;">
            <el-header height="100px" ref="el_header">
                <div class="flex gap-1 padding-x-5 justify-center item-start header-div">
                    <div class="logo-div">
                        <img class="logo" style="cursor: pointer" src="../assets/ai2.png" width="150" height="100" alt="logo" @click="router.push('/')"/>
                    </div>
                    <div class="hi-title flex-grow">
                        <h2>Hi, 欢迎来到AI问答平台</h2>
                    </div>
                    <div class="flex justify-center item-center">
                        <div class="relative">
                            <button class="btn" @click="router.push('/login')" style="min-width: 80px">
                                登录
                            </button>
                        </div>
                        <span>|</span>
                        <div class="relative">
                            <button class="btn" @click="router.push('/register')" style="min-width: 80px">
                                注册
                            </button>
                        </div>
                    </div>
                </div>
            </el-header>
            <el-main class="flex gap-1 relative">
                <div class="flex flex-col gap-1 main-text-div">
                    <div style="position: relative">
                        <div class="print-text" v-html="wiki_text"></div>
                    </div>
                </div>
                <el-collapse-transition>
                    <router-view />
                </el-collapse-transition>
            </el-main>
        </el-container>
    </div>
</template>

<style scoped>

.main-page {
    height: 100%;
    width: 100%;
    overflow: auto;
}
.el-header {
    margin-top: 30px;
    color: #b9b9b9;
    letter-spacing: 3px;
    min-width: 865px;
}
.el-main {
    overflow: hidden;
    //height: 100%;
}
.logo-div {
    min-width: 150px;
}
.main-text-div {
    width: 30%;
    height: 80%;
    color: #b9b9b9;
    margin-left: 5rem;
    margin-top: 5rem;
    line-height: 1.8rem;
    white-space: pre-wrap;
    text-indent: 24px;
}







    .flex {
        display: flex;
    }
    .flex-col {
        flex-direction: column;
    }
    .justify-center {
        justify-content: center;
    }
    .item-center {
        align-items: center;
    }
    .item-start {
        align-items: flex-start;
    }
    .gap-1 {
        gap: 1rem;
    }
    .flex-grow {
        flex-grow: 1;
    }
    .relative {
        position: relative;
    }
    .padding-x-5 {
        padding-left: 5rem;
        padding-right: 5rem;
    }

    .btn {
        font-size: 1em;
        background-color: transparent;
        color: white;
        padding: .5rem 1.5rem;
        border: 0;
        cursor: pointer;
    }
    .btn:hover {
        color: #1bffe7;
    }
    @keyframes Blink {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }


</style>